<template>
  <div>
    <a-layout style="height: 158vh;">
      <a-layout-content style="background-size:100% 100vh; background-color: #F2F2E6"
                        :style="{'background-image': `url(${require('../../public/images/group4.png')})`}">
        <v-row no-gutters style="padding-top: 9vh">
          <v-col cols="12" lg="1"></v-col>
          <v-col cols="12" lg="9">
            <v-card tile>
              <v-img
                width="100%"
                src="../../public/images/mark.jpeg"
              >
                <br><br>
                <v-row>
                  <v-col cols="12" lg="7"></v-col>
                  <v-col cols="12" lg="5">
                    <v-img src="../../public/images/item.png" width="26vw">
                      <v-container style="margin-left: 1vw">
                        <br>
                        <span style="font-family: 黑体,serif; font-size: xxx-large; font-weight: bolder">
                        没有创新思路？
                      </span>
                        <br>
                        <span style="font-family: 黑体,serif; font-size: large; font-weight: bold">
                        使用智能创新引导工具，引导创新，激发你的灵感。
                      </span>
                        <br>
                        <br>
                        <v-btn elevation="2" tile color="au_black" style="color: #FFFAF4; font-family: 黑体,serif" @click="startGuide">
                          开始智能引导
                          <v-icon right>
                            mdi-arrow-right-thin
                          </v-icon>
                        </v-btn>
                      </v-container>
                    </v-img>
                  </v-col>
                </v-row>
                <br>
                <v-row>
                  <v-col cols="12" lg="3"></v-col>
                  <v-col cols="12" lg="5">
                    <v-img src="../../public/images/item.png" width="26vw">
                      <v-container style="margin-left: 1vw">
                        <br>
                        <span style="font-family: 黑体,serif; font-size: xxx-large; font-weight: bolder">
                        自发的想法？
                      </span>
                        <br>
                        <span style="font-family: 黑体,serif; font-size: large; font-weight: bold">
                        加入创意社区，分享你的灵感，发布你的创意。
                      </span>
                        <br>
                        <br>
                        <v-btn
                          elevation="2"
                          tile
                          color="au_black"
                          style="color: #FFFAF4; font-family: 黑体,serif"
                          @click="SubmitIdea"
                        >
                          提交你的想法
                          <v-icon right>
                            mdi-arrow-right-thin
                          </v-icon>
                        </v-btn>
                      </v-container>
                    </v-img>
                  </v-col>
                  <v-col cols="12" lg="4"></v-col>
                </v-row>
                <br><br>
              </v-img>
            </v-card>
          </v-col>
          <v-col cols="12" lg="1">
            <div style="padding-top: 35vh">
              <p class="myfont1" style="padding-bottom: 33vh">
                Intelligent&emsp;Innovation&emsp;Guidance&emsp;Tool
              </p>
            </div>
          </v-col>
        </v-row>

        <div class="detail" style="margin-left: 13vw"></div>

        <br><br><br>

        <v-lazy
          v-model="isActive"
          :options="{threshold: .5}"
          min-height="300"
          transition="slide-y-reverse-transition"
        >
          <v-row justify-lg="center">
            <v-col cols="12" lg="3">
              <v-card height="50vh" width="20vw">
                <br>
                <v-container>
                  <v-row justify-lg="center">
                    <v-col cols="12" lg="4">
                      <v-img
                        src="../../public/images/feature_1.png"
                        lazy-src="../../public/images/feature_1.png"
                      ></v-img>
                    </v-col>
                    <v-col cols="12" lg="12" style="text-align: center">
                      <span style="font-size: x-large; font-weight: bold">创意分享</span>
                    </v-col>
                    <v-col cols="12" lg="12"></v-col>
                    <v-col cols="12" lg="12" style="text-align: center">
                      <v-subheader>
                        在创意社区分享你的绝佳创意，浏览他人创意启发创新灵感，分享交流思考创意价值，让你的才智在这里体现，欢迎记录你灵光一现的想法。
                      </v-subheader>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card>
            </v-col>
            <v-col cols="12" lg="3">
              <v-card height="50vh" width="20vw">
                <br>
                <v-container>
                  <v-row justify-lg="center">
                    <v-col cols="12" lg="4">
                      <v-img
                        src="../../public/images/feature_2.png"
                        lazy-src="../../public/images/feature_2.png"
                      ></v-img>
                    </v-col>
                    <v-col cols="12" lg="12" style="text-align: center">
                      <span style="font-size: x-large; font-weight: bold">创新引导</span>
                    </v-col>
                    <v-col cols="12" lg="12"></v-col>
                    <v-col cols="12" lg="12" style="text-align: center">
                      <v-subheader>
                        从填写调查问卷明晰问题现状，到建立功能模型图定位问题矛盾点，再到参考专利获得解决问题思路，我们将一步步引导你创新，让创新变得有规律可循。
                      </v-subheader>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card>
            </v-col>
            <v-col cols="12" lg="3">
              <v-card height="50vh" width="20vw">
                <br>
                <v-container>
                  <v-row justify-lg="center">
                    <v-col cols="12" lg="4">
                      <v-img
                        src="../../public/images/feature_3.png"
                        lazy-src="../../public/images/feature_3.png"
                      ></v-img>
                    </v-col>
                    <v-col cols="12" lg="12" style="text-align: center">
                      <span style="font-size: x-large; font-weight: bold">智能创新</span>
                    </v-col>
                    <v-col cols="12" lg="12"></v-col>
                    <v-col cols="12" lg="12" style="text-align: center">
                      <v-subheader>
                        根据问题模型图智能生成解决途径，根据发明原理智能推荐关键词，智能推荐有参考价值的专利，智能创新引导工具帮助你智能创新，让创新变得简单。
                      </v-subheader>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card>
            </v-col>
          </v-row>
        </v-lazy>

        <br><br><br><br><br><br><br><br><br><br>

        <v-lazy
          v-model="isActive"
          :options="{threshold: .5}"
          min-height="300"
          transition="slide-y-reverse-transition"
        >

          <v-row justify-lg="center" no-gutters style="height: 70vh">
            <v-col cols="12" lg="5"
                   :style="{'background-image': `url(${require('../../public/images/home_background_1.png')})`}"
            >
              <img
                v-lazy="require('../../public/images/aqsl.jpeg')"
                style="margin-left: 8vw"
                height="437" width="410"
                alt="阿奇舒勒"/>
            </v-col>
            <v-col cols="12" lg="6">
              <p style="font-size: xx-large;font-weight: bolder; font-family: 黑体,serif">智能创新引导工具的理论基础——TRIZ理论</p>
              <p style="color: #555555; font-size: 16px">
                TRIZ理论是阿奇舒勒(G. S. Altshuller)在1946年创立的，它是发明问题的解决理论，为人们创造性地发现问题和解决问题提供了系统的理论和方法工具。TRIZ理论利用矛盾矩阵，揭示创造发明的内在规律和原理，着力于澄清和强调系统中存在的矛盾，目标是完全解决矛盾，获得最终的理想解。
              </p>
              <br>
              <v-row dense>
                <v-col cols="12" lg="12">
                  <span style="font-size: x-large;font-weight: bolder; font-family: 黑体,serif">
                    TRIZ矛盾矩阵
                  </span>
                </v-col>
                <v-col cols="12" lg="12">
                  <span style="color: #555555; font-size: 16px">
                    在对专利研究中，阿奇舒勒发现，仅有39项工程参数在彼此相对改善和恶化，而这些专利都是在不同的领域上解决这些工程参数的冲突与矛盾。这些矛盾不断地出现，又不断地被解决。由此他总结出了解决冲突和矛盾的40个创新原理。之后，将这些冲突与冲突解决原理组成一个由39个改善参数与39个恶化参数构成的矩阵。阿奇舒勒矛盾矩阵为问题解决者提供了一个可以根据系统中产生矛盾的两个工程参数，从矩阵表中直接查找化解该矛盾的发明原理来解决问题。
                  </span>
                </v-col>
              </v-row>
              <v-row dense>
                <v-col cols="12" lg="12">
                  <span style="font-size: x-large;font-weight: bolder; font-family: 黑体,serif">
                    专利参考
                  </span>
                </v-col>
                <v-col cols="12" lg="12">
                  <span style="color: #555555; font-size: 16px">
                    智能创新引导工具提供大量专利供用户参考，用户使用TRIZ矛盾矩阵获得发明原理后将得到一系列关键词推荐，用户可以利用这些关键词检索具有参考价值的专利，借鉴这些专利的创新思路来帮助自己解决问题。
                  </span>
                </v-col>
              </v-row>
            </v-col>
          </v-row>
        </v-lazy>

        <br><br><br><br><br><br><br>

        <v-lazy
          v-model="isActive"
          :options="{threshold: .5}"
          min-height="300"
          transition="slide-y-reverse-transition"
        >
          <v-row justify-lg="center" no-gutters style="background-color: #89B8CA; height: 90vh;">
            <v-col cols="12" lg="10"><br><br><br>
              <p style="font-size: xx-large;color: white;font-weight: bold; font-family: 黑体,serif">
                欢迎在这里分享你的创意——创意社区
              </p>
            </v-col>
            <v-col cols="12" lg="5">
              <v-row dense>
                <v-col cols="12" lg="1">
                  <v-img src="../../public/images/one.png" width="1vw" style="margin: auto"></v-img>
                </v-col>
                <v-col cols="12" lg="10">
                  <span style="color: white;font-size: x-large">捕捉灵光一现的想法</span>
                  <p style="color: rgba(255,255,255,0.9);font-size: large">
                    脑海中突然闪过一个点子？不要放过它，去思考它的可行性，尝试画出它的草图
                  </p>
                </v-col>
                <v-col cols="12" lg="1" style="margin-left: 5px">
                  <v-img src="../../public/images/two.png" width="2vw" style="margin: auto"></v-img>
                </v-col>
                <v-col cols="12" lg="10">
                  <span style="color: white;font-size: x-large">编辑并上传你的创意</span>
                  <p style="color: rgba(255,255,255,0.9);font-size: large">
                    构想创意的细节，描述你的创意，用文字、图片、视频的形式表达你的想法
                  </p>
                </v-col>
                <v-col cols="12" lg="1" style="margin-left: 10px">
                  <v-img src="../../public/images/three.png" width="2vw" style="margin: auto"></v-img>
                </v-col>
                <v-col cols="12" lg="10">
                  <span style="color: white;font-size: x-large">与大家交流你的创意</span>
                  <p style="color: rgba(255,255,255,0.9);font-size: large">
                    在创意社区发布你的创意，与大家交流经验，听取他人意见，将你的想法变得更加完善
                  </p>
                </v-col>
                <v-col cols="12" lg="1" style="margin-left: 15px">
                  <v-img src="../../public/images/four.png" width="2vw" style="margin: auto"></v-img>
                </v-col>
                <v-col cols="12" lg="10">
                  <span style="color: white;font-size: x-large">尝试去实现你的创意</span>
                  <p style="color: rgba(255,255,255,0.9);font-size: large">
                    如果觉得你的创意十分具有可行性，不妨使用智能创新引导工具去得到一份实现方案
                  </p>
                </v-col>
              </v-row>
            </v-col>
            <v-col cols="12" lg="5"
                   :style="{'background-image': `url(${require('../../public/images/home_background_1.png')})`}"
            >
              <img v-lazy="require('../../public/images/home_creative.png')"
                   style="margin-left: 8vw"
                   height="400" width="500"
              />
            </v-col>
          </v-row>
        </v-lazy>

        <v-row no-gutters style="background-color: #89B8CA; height: 90vh;">
          <v-col cols="12" lg="12" style="text-align: center">
            <br><br><br><br><br><br><br><br><br><br><br><br>
            <p style="color: white;font-size: xx-large">我们期待你的创新</p>
            <p style="color: white;font-size: large">We are looking forward to your innovation!</p>
          </v-col>
        </v-row>

      </a-layout-content>
    </a-layout>

  </div>
</template>

<script>
export default {
  name: 'Home',
  created() {
  },
  mounted() {},
  data: () => ({
    username: '',
    window: 0,
    isActive: false,
    isActive3:false,
  }),
  methods:{
    startGuide(){
      this.$router.push('/intelligent_guidance/info')
    },
    SubmitIdea(){
      this.$router.push('/idea_submission')
    }
  }
}
</script>

<style type="text/css">
.myfont1 {
  width: 30vw;
  height: 10vh;
  transform: rotate(270deg);
  color: #2C2E2D;
  font-size: 14px;
  font-weight: bold;
  font-family: "Bubblegum Sans",serif;
}
.detail{
  height: 40vh;
  background-image: url(../../public/images/BRWS.png);
  background-color: transparent;
}
</style>

